<template>
  <view class="coupon-detail">
    <!-- #ifdef H5 -->
    <van-nav-bar @click-left="onClickLeft" left-arrow title="优惠券详情"></van-nav-bar>
    <!-- #endif -->
    <view class="coupon-detail-cnt">
      <CouponItem
        :page-type="3"
        :couponType="2"
        :expired="data.expired"
        :items="data.items"></CouponItem>
      <view class="coupon-content">
        <text class="title text-bold">优惠券信息</text>
        <view class="info" id="couponInfo">
          <view class="left flex-column">
            <text class="test">抵扣费用类型</text>
            <text class="test">使用门槛</text>
            <text class="test" v-if="data.items.couponType === 0">抵扣上限</text>
            <text class="test">使用说明</text>
          </view>
          <view class="right flex-column">
            <text class="test">
              {{ discountType[data.items.discountType] || '--' }}
            </text>
            <text class="test">满{{ getVal2(data.items.qualifiedAmount) }}元可用</text>
            <text class="test text-red" v-if="data.items.couponType === 0">
              {{ getVal2(data.items.discountLimit, '元') }}
            </text>
            <text class="test">{{ data.items.introduce || '--' }}</text>
          </view>
        </view>
        <view class="line"></view>
        <text class="title text-bold">
          {{ data.items.stationType === 1 ? '可用运营商' : '可用电站' }}
        </text>
        <view class="info">
          <view v-if="data.items.stationType === 0">
            <view class="test1">全部电站</view>
          </view>
          <view class="info-list" v-else :style="data.styleInfo">
            <view v-for="(item, index) in data.items.stationNames" :key="index" class="test1">
              {{ item }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import CouponItem from '@/components/couponItem/couponItem.vue';
import { getSystemInfo, setToastInstance, systemInfo } from '@/mixins/info';
import { getEntityById } from '@/service/apis/market';
import { getVal2 } from '@/utils/util';
// #ifdef MP-WEIXIN
import { useToast } from '@/components/wxToast';
setToastInstance(useToast());
// #endif

// 分享
onShareAppMessage(() => {
  return {
    title: '',
    path: '/pages/stationMap/stationMap',
  };
});
const data = reactive({
  items: {} as any,
  expired: false,
  styleInfo: '',
});

// 获取元素信息
const { proxy: vm } = getCurrentInstance()!;
const query = uni.createSelectorQuery().in(vm);
onLoad((option: any) => {
  data.expired = option.expired || false;
  getEntityById(option.id).then((res: any) => {
    data.items = res;
    const timer = setTimeout(() => {
      query
        .select('#couponInfo')
        .boundingClientRect((info: any) => {
          data.styleInfo = `height: calc(100vh - 440rpx - ${info.height}px);`;
          // #ifdef H5
          data.styleInfo = `height: calc(100vh - 440rpx - ${info.height}px - ${
            getSystemInfo().navHeight
          }px);`;
          // #endif
        })
        .exec();
      clearTimeout(timer);
    }, 200);
  });
});

const discountType = ['总费用', '服务费', '电费'];

// #ifdef H5
const onClickLeft = () => {
  uni.navigateBack();
};
setTimeout(() => {
  const navBarEle = document.querySelector('.van-nav-bar') as HTMLElement;
  navBarEle.style.paddingTop = `${systemInfo.statusBarHeight}px`;
});
// #endif
</script>

<style lang="scss">
page {
  background-color: #f2f2f2;
}
</style>

<style lang="scss" scoped>
.coupon-detail {
  &-cnt {
    padding-top: 12px;
    padding-left: 16px;
    width: calc(100% - 32px);
  }

  .coupon-content {
    padding: 16px 0 0 0;
    margin-top: 12px;
    background-color: #fff;
    font-size: 14px;
    color: #545454;
    border-radius: 8px;

    &:last-child {
      border: 0;
    }

    .title {
      margin: 0 16px;
      line-height: 24px;
      color: #000;
    }

    .info {
      display: flex;
      font-size: 14px;

      .info-list {
        height: calc(100vh - 300px);
        width: 100%;
        overflow: auto;
      }

      .left {
        width: 90px;
        margin: 0 16px;
        color: #858585;
      }

      .right {
        width: calc(100% - 144px);
        margin: 0 16px;
        text-align: right;
        color: #242424;
      }

      .test {
        line-height: 22px;
        margin-top: 8px;
        word-break: break-all;
      }

      .test1 {
        line-height: 22px;
        margin: 8px 16px 0;
        color: #242424;
      }

      .text-red {
        color: #fa3939;
      }
    }

    .line {
      margin: 12px 16px;
      height: 1px;
      background-color: #f2f2f2;
      // border-bottom: 1px solid #f2f2f2;
    }
  }
}
</style>